<template>
    <div id="shouView">
        <div style="background-color: #ffffff;">
        <div style="text-align: center; font-size: 1.5em;margin-top:5%;">收藏夹</div>

           <router-link to="/shoucang" slot="left">
            <i class="el-icon-arrow-left" style="float: left;margin-top:-5%;margin-left: 5%;"></i>
            </router-link>
        </div>

        <div class="fengeee"></div>

        <div class="sscca">
            <div>
                <div class="scnea">看来我得有个关于码农的收藏夹了</div>
                
                <span class="sctxa"></span>
                <span class="scuea">一串字母</span>
                <mt-button size="small" class="btnsc">✚ 关注</mt-button>
         </div>

         <div class="fenge" style="margin-top:10%;opacity: 0.5;"></div>
         
   

         <div  v-for="(item,index) in shoucang_name" class="ssccaa" @click="togo(index)">     
            
                    <div class="sctx"></div>
                    <div class="scue">{{shoucang_username[index]}}</div>
                    <div class="scne">{{shoucang_name[index]}}</div>
                    <div class="scnr">{{shoucang_neirong[index]}}</div>

                   
                                                                   
         </div>
            
       
          
    </div>
</template>

<script>

 export default{
       
        data(){
          
            return{
               
                shoucang_name:[
                     "大一高数如何学习？",
                    "div中如何设置文字居中？",
                    "在ae中如何做视频变速？",
                    "英语专业四级和CET四级有什么区别？",
                ],
                
                 shoucang_touxiang:[
                    "./src/assets/book/s09.jpg",

                    "./src/assets/book/s11.jpg"       
                ],

                  shoucang_username:[
                     "Misha","肥肥猫","gugugu","一串字母"
                ],
                
                  shoucang_neirong:[
                    "中学的教学方式和方法与大学有质的差别，中学的学习学生是在教师的直接指导下进行模仿和单一性的学习，大学则是在...",

                    "可以用line-height行高来设置文字的垂直居中，水平居中就用<center>这个标签或者margin:0 auto;这个样式或者楼上讲...",

                    "1、打开 Adobe After Effects CC软件。2、点击新建合成按钮，新建一合成。3、ctrl+i导入准备好的视频或者音乐素...",

                    "TEM-4英语专业四级考试（TEM-4，Test for English Majors-Band 4），全称为全国高校英语专业四级考试。自1991年...",
                  ],
                
                  shoucang_engName:[
                     "booo_1","booo_2","booo_3","booo_4"
                  ]
           }
        },
         methods:{

                getbook_ico(i){
                return this.shoucang_ico[i];
            },
            go(id){
                this.$store.commit("changeStyle",2.5);
                //id在store中找到
                this.$store.commit("choosebooks",id);

                this.$router.push({path:"../booksView"});
            },
            togo(index){
                var id=this.shoucang_engName[index];
                this.go(id);
            },
         
              }
    }
</script>

<style>

.sscca {
    font-family: "Microsoft YaHei";
}

.ssccaa {
    border-bottom: 8px solid #D3DCE6;
    height: 160px;
}

.scnr {
    float:left;
    margin-left: 3%;
    text-align: left;
    margin-top:2%;
    width:95%;
}


.scnea {
    font-size: 2em;
   
    text-align: center;
    margin-top: 8%;
    margin-bottom: 2%;
    width:100%;
 
   
}

.sctxa {
       background-color: #324057;
        width:6%;
        height:25px;
        float: left;
        margin-left: 40%;
        border: 2px #324057 solid;
        border-radius:50%;
}

.scuea {
    
    float: left;
    margin-left: 3%;
}

.btnsc {
    margin-top:10%;
    width:20%;
    border:1px solid #324057;
    background-color: #ffffff;
    font-family: "Microsoft YaHei";
  
}
</style>